<template lang="html">
  <div class="main-page" id="user-page">
    <!-- 标题 -->
    <!-- <van-nav-bar class="main-header" :title="title" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft"/> -->
    <!-- <nav-bar :title="title" @goBack="onClickLeft"/> -->
    <!-- 主体内容 -->
    <div class="main-content has-main-tabbar has-header-space">
         <div>
        <!-- 图 -->
        <div style="height:375px;background-color:#ffffff;">
          <img class="gift-img" :src="ProductInfo.product_image" alt="">
        </div>
        <!-- 价格 -->
           <div class="price-shop">
           <div style="text-align: right;padding-top:10px">
            <span class="inventory">库存：1111</span>
          </div>
            <div class="price-name">
              <span class="price-name-item1">礼包价</span>
              <span class="price-name-item2">￥</span>
              <span class="price-name-item3">{{ProductInfo.item_unit_price}}</span>
              <span class="price-name-item4">原价{{ProductInfo.item_unit_price ? ProductInfo.item_unit_price : ProductInfo.item_market_price}}</span>
            </div>
            <div class="shop-name">{{ProductInfo.product_name}}</div>
          </div>
        <!-- 权益 -->
        <div class="merber">
          <div class="merber-power">超级会员权益</div>
          <div class="merber-info">
          <img class="merber-icon" src="https://mjmh.meijiameihuo.com/wechat/images/icon/gift.png" alt="">
          <span class="merber-info-item1">购物省钱</span>
          <span class="merber-info-item2">分享赚钱</span>
          <span class="merber-info-item3">无需囤货</span>
          <span class="merber-info-item4">全场包邮</span>
        </div>
      </div>
        <!-- 图文详情 -->
          <template v-if="ProductInfo.product_detail_img || ProductInfo.product_param_img || ProductInfo.product_service_img">
           <div>
            <van-cell  bind:click="evaluationDeatail" >
            <div slot="title">
              <span class="evaluation-title">商品详情</span>
            </div>
            </van-cell>
               <div v-if="ProductInfo.product_detail_img || ProductInfo.product_detail_img != ['']" style="text-align:center;background:#ffffff;">
                 <template v-for="(i, ind) in ProductInfo.product_detail_img"  :index="ind">
                   <img mode="widthFix" style="width:100%;" v-if="i !== ''" :key="ind" :src="i" alt="">
                 </template>
               </div>
              <div v-if="ProductInfo.product_param_img || ProductInfo.product_param_img != ['']" style="text-align:center;background:#ffffff;">
                <template v-for="(param_item, index) in ProductInfo.product_param_img"  :index="index">
                  <img mode="widthFix" style="width:100%;" v-if="param_item !== ''" :key="index"  :src="param_item" alt="">
                </template>
              </div>
                <div v-if="ProductInfo.product_service_img || ProductInfo.product_service_img != ['']" style="text-align:center;background:#ffffff;">
                  <template v-for="(service_item, service_indx) in ProductInfo.product_service_img"  :index="service_indx">
                    <img mode="widthFix" style="width:100%;" v-if="service_item !== ''" :key="service_indx" :src="service_item" alt="">
                  </template>
              </div>
            </div>
          </template>
          <!-- 导航 -->
          <div class="shop-nav">
            <van-row gutter="40">
              <van-col span="3">
                <div class="logo">
                  <img style="width:100%;height:100%;" src="https://mjmh.meijiameihuo.com/wechat/images/common/logon.png" alt="">
                </div>
              </van-col>
              <van-col span="9">
                <img class="open-img" @click="openApp" src="https://mjmh.meijiameihuo.com/wechat/images/common/nowOpen.png" alt="">
                <div class="open-text">打开客户端专享优惠</div>
              </van-col>
              <van-col span="12">
                <div style="">
                  <span class="code-text">长按识别二维码</span>
                  <div class="code-img">
                    <img class="" src="" alt="">
                  </div>
                </div>
              </van-col>
            </van-row>
          </div>
      </div>
    </div>
  <van-toast id="van-toast" />
  <van-dialog id="van-dialog" />
  </div>
</template>

<script>

export default {
  data () {
    return {
      active: 3,
      title: '',
      userData: {},
      proId: null, // 产品id
      item_id: null,
      activity_id: null,
      activity_name: '',
      ProductInfo: {},
      datas: {}
    }
  },
  created () {
    console.log(this.$route)
    if (this.$route.query.item_id) {
      this.activity_id = this.$route.query.activity_id ? this.$route.query.activity_id : ''
      this.activity_name = this.$route.query.activity_name ? this.$route.query.activity_name : ''
      this.item_id = this.$route.query.item_id ? this.$route.query.item_id : ''
      this.initProduct(this.item_id, this.activity_id, this.activity_name)
    }
    // this.getUserInfo()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    buyNow () {
    },
    openApp () {
      console.log('打开app')
      let u = navigator.userAgent
      if (u.indexOf('iPhone') !== -1) {
        console.log('打开ios')
        window.location.href = 'https://itunes.apple.com/cn/app/id1400647356?mt=8'
      } else {
        this.getApp()
      }
    },
    getApp () { // 获取安卓链接
      console.log('打开安卓')
      var data = {}
      return new Promise((resolve, reject) => {
        this.$Axios({ url: '/android_package_url', data, method: 'get' }).then((resp) => { // 请求成功
          console.log(resp)
          if (resp.return_code === '0000') {
            if (resp.data) {
              window.location.href = resp.data
            }
            console.log(this.userData)
            console.log('请求成功')
          } else {
            console.log('请求错误')
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          // this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    // getUserInfo () { // 获取用户信息判断是否vip
    //   var data = {}
    //   return new Promise((resolve, reject) => {
    //     this.$Axios({ url: '/profile', data, method: 'get' }).then((resp) => { // 请求成功
    //       console.log(resp)
    //       if (resp.return_code === '0000') {
    //         if (resp.data) {
    //           this.userData = resp.data
    //         }
    //         console.log(this.userData)
    //         console.log('请求成功')
    //       } else {
    //         console.log('请求错误')
    //       }
    //       resolve(resp)
    //     }).catch((error) => { // 请求失败
    //       this.$_requestInterceptor('error', error)
    //       reject(error)
    //     })
    //   })
    // },
    initProduct (id, value1, value2) { // 获取商品详情
      var params = {
        item_id: id,
        activity_id: value1,
        activity_name: value2
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'product_detail', params, method: 'get' }).then((res) => { // 请求成功
          console.log(res)
          if (res.return_code === '0000') {
            if (res.data) {
              this.datas = res.data
              this.ProductInfo = res.data.item_row
              var contractList = [] // 处理ProductInfo.contractlist 规格
              for (let ind in this.ProductInfo.contractlist) {
                let index = ind
                let value = this.ProductInfo.contractlist[index]
                contractList.push(value)
              }
              this.contractList = contractList
              console.log(contractList)
              this.title = this.ProductInfo.product_item_name
            }
            console.log('请求成功')
          } else {
            console.log('请求错误')
          }
          resolve(res)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.gift-img{
  width:100%;height:100%;
}
.price-shop{
  background-color: #ffffff;
  border-bottom: 1px solid #EFEFEF;
}
.price-name{
  text-align: center;
}
.price-name-item1{
  color: #666666;
  font-size: 12px;
  font-weight: bold;
  margin: 14px 8px 0 0;
}
.price-name-item2{
  color: #E91F3F;
  font-size: 18px;
  font-weight: bold;
}
.price-name-item3{
  color: #E91F3F;
  font-size: 33px;
  font-weight: bold;
}
.price-name-item4{
  color: #333333;
  font-size: 12px;
  font-weight: bold;
  text-decoration:line-through;
  margin: 14px 0 0 8px;
}
.shop-name{
  text-align: center;
  color: #333333;
  font-size: 20px;
  font-weight: bold;
  margin: 22px 0 12px 0;
}
.merber{
  background-color: #ffffff;
  padding:19px;
  margin-bottom:12px;
}
.merber-info{
  position:relative;color:#333333;font-size:13px;
  margin-left: 37px;
}
.merber-icon{
  width:270px;
  height:19px;
  margin: 0 0 14px 0;
}
.merber-power{
  color: #333333;
  font-size: 15px;
  margin-bottom: 19px;
}
.merber-info-item1{
  position:absolute;
  top:29px;
  left:-18px;
}
.merber-info-item2{
  position:absolute;
  top:29px;
  left:69px;
}
.merber-info-item3{
  position:absolute;
  top:29px;
  left:152px;
}
.merber-info-item4{
  position:absolute;
  top:29px;
  left:236px;
}
.inventory{
  color:#999999;font-size:12px;
  background-color: #F5F5F5;
  padding: 6px 14px;
  margin: 0 0 8px 10px;
  border-radius: 0.9em;
}
.evaluation-title{
color: #333333;
font-size: 15px;
}
.shop-nav{
  width: 100%;
  position:fixed;
  bottom:0;
  left:0;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 12px 15px;
}
.logo{
  width: 50px;
  height: 50px;
}
.code-img{
  display: inline-block;
  width: 45px;
  height: 45px;
  background-color: #D5AA72;
}
.open-img{
  width: 70px;
  height: 23px;
  margin-top:4px;
}
.code-text{
  position: relative;
  top: 15px;
  right: 6px;
  color: #FFFFFF;
  font-size: 10px;
  padding: 15px 0;
}
.open-text{
  color: #FFFFFF;
  font-size: 10px;
  // margin-top:4px;
}
</style>
